<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in goods.imgList" :key="index">
					<view class="image-wrapper"><image :src="item + '?x-oss-process=style/600px'" class="loaded" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="intedetail_wrap flex">
			<view class="intedetail_left">
				<view class="intedetail_title">{{ goods.spuTitle }}</view>
				<view class="intedetail_has">近30天已兑{{ goods.sales }}份</view>
			</view>
			<view class="intedetail_text flex">{{ goods.integral }}积分 <view v-if="goods.type===2">+ {{ goods.amount / 100.0 }}元</view>
			</view>
		</view>
		<view class="convertible">
			<view class="convertible_notes">兑换须知</view>
			<view class="convertible_content">
				<view>1.点击“立即兑换”-“填写地址”-“支付相应积分和金额”。</view>
				<view>2.商品订单状态可在“我的兑换记录”中查询。</view>
				<view>3.兑换后有效期为7天（含兑换当天），逾期自动作废，兑换后不可取消不可退换。</view>
				<view>温馨提示：</view>
				<view>1.兑换商品数量有限，先到先得，兑完为止，积分一经使用不支持退换.</view>
				<view>2.全部使用积分形式兑换商品无损坏问题不支持退货。</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header"><text>图文详情</text></view>
			<u-parse className="rich-img" :content="goods.detail"></u-parse>
		</view>
		<button class="goconver" @click="goImmediately" :disabled="integralNum < goods.integral">{{ integralNum < goods.integral?'积分不足': '立即兑换' }}</button>
	</view>
</template>

<script>
export default {
	components: {
	},
	computed: {
	},
	data() {
		return {
			goods: {
				freightTemplate: undefined,
				skuList: [],
				categoryList: [],
				appraisePage: {}
			},
			integerGoodsId: 0,
			integralNum: 0,
		};
	},
	onHide() {
		this.seckill_stop = false;
	},
	destroyed() {
		this.seckill_stop = false;
	},
	onShow() {
		this.detail_ajax(this.integerGoodsId)
		this.get_integral_info()
	},
	onLoad(options) {
		if(options.integerGoodsId){
			this.integerGoodsId = options.integerGoodsId
		}
	},
	onShareAppMessage() {
		// return {
		// 	title: '商品详情' + this.goods.title,
		// 	imageUrl: this.goods.imgList[0] + '?x-oss-process=style/600px',
		// 	path: '/pages/goods/seckill_detail?seckillSpuId=' + this.goods.seckillInfo.seckillSpuId
		// };
	},
	methods: {
		detail_ajax(id){
			this.$api.request('integralActivity', 'IntegralGoodsDetail', {
				integerGoodsId: id
			}, failres => {
				this.$api.msg(failres.errmsg)
			}).then(res => {
				this.imgList = res.data.imgList;
				this.goods = res.data;
			})
		},
		goImmediately() {
			// this.$api.msg('积分不足')
			let skuItem = {
				skuImg: this.goods.img,
				spuTitle: this.goods.spuTitle,
				integral: this.goods.integral,
				skuId: this.goods.skuId,
				id: this.goods.integerGoodsId,
				amount: this.goods.amount,
				num: 1,
				type: this.goods.type
			}
			let skuList = [1]
			skuList[0] = skuItem
			this.$api.globalData.skuList = skuList
			uni.navigateTo({
				url: `/pages_integral/integral/integral_order?takeway=buy`
			})
		},
		// 获取积分信息
		get_integral_info() {
			this.$api.request('integralActivity', 'getUserDoByUserId').then(res => {
				this.integralNum = res.data.currentIntegral
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 160upx;
}

.icon-you {
	font-size: $font-base + 2upx;
	color: #888;
}

.flex {
	display: flex;
}

.carousel {
	height: 722upx;
	position: relative;

	swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.intedetail_wrap{
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 10upx 20upx;
	background: #fff;
	margin: 20upx auto;
	border-radius: 12upx;
	.intedetail_left{
		width: 75%;
		.intedetail_title{
			font-size: 32upx;
			font-weight: 600;
			line-height: 48upx;
		}
		.intedetail_has{
			color: #898989;
			font-size: 26upx;
			line-height: 45upx;
		}
	}
	.intedetail_text{
		color: #F9456A;
		font-size: 26upx;
	}
}
.convertible{
	width: 100%;
	background: #fff;
	padding: 10upx 20upx;
	border-radius: 12upx;
	margin: 10upx auto;
	.convertible_notes{
		width: 94%;
		font-size: 32upx;
		font-weight: 600;
		padding: 20upx 0;
	}
	.convertible_content{
		width: 94%;
		view{
			padding: 15upx;
			font-size: 26upx;
		}
	}
}
.goconver{
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 80upx;
	background-color: #F9456A;
	color: #fff;
	font-size: 38upx;
	text-align: center;
	line-height: 80upx;
	z-index: 999;
	border-radius: 0upx;
}

/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16upx;
	width: 750upx;
	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
}
</style>
